<template>
	<view>
		
		<view>
			<view class="background">
				<view>
					<view class="uni-padding-wrap  content">
						<page-head title="" :login_btn=login_btn  @poplogin='plogin' :name="user_info[0]"></page-head>
						<view class="flow-bg">
							<view style="margin: auto; max-width: 1920px;" >
								<!-- <image src='/static/fengmian/fengmiankeji.png' class="slogan"></image> -->
								
								<view class="slogan-header">
									<!-- <image src='/static/fj.png' class="slogan"></image> -->
									<view style="margin-top: 60px;"><text class="slogan-text" style="font-size: 64px; color: rgb(107 86 215);">  赛博 &nbsp;&nbsp;仓鼠洞</text> </view>
									<view><text class="slogan-text">  私人专享 &nbsp;&nbsp;知识搜索库</text> </view>
									<view style="margin: auto; width: 600px; margin-top: 100px;">
										<uni-search-bar bgColor="rgba( 250, 250, 250)" placeholder="开始连接 ~  (输入关键词查找/输入网址录入)" @confirm="search" @cancel="cancel" >
													<uni-icons slot="searchIcon" color="#f33dddf0" size="18" type="home" />
										</uni-search-bar>
									</view>
									<view style="min-height: 180px;"><button class="slogan-bn" @click="goto">导入 / 搜索</button></view>
									
								</view>
								<view style="margin-left: 10px; margin-bottom: -20px;" >
									<!-- <image src='/static/index/zuopin.png' class="zpz"></image> -->
									<!-- <text style="font-size: 3em; font-weight: 600; color: white; font-family: PingFangSC-Semibold, PingFang SC; white-space: break-spaces;"> 收藏列表</text> -->
									<!-- <text style="font-size: 1.5em; font-weight: 600; color: white; margin-left: 20px;margin-right: 10px;">/</text> -->
									<!-- <text style="font-size: 1.5em; font-weight: 600; color: white; ">最近收藏</text> -->
								</view>
							</view>
						
						</view>
						
						<view v-if="isMask">
							<view v-if="index==1">
								<popup type="1" @close="closeMask()" @login="login_mp"></popup>
							</view>
							<view v-else-if="index==2">
								<popup type="2" :money="money" @close="closeMask()" ></popup>
							</view>
							<view v-else-if="index==3">
								<popup type="3" :title="title" :content="content" @close="closeMask()"></popup>
							</view>
							<view v-else-if="index==4">
								<popup type="4" :version="version" :content="desc" @close="closeMask()"></popup>
							</view>
							<view v-else-if="index==5">
								<popup type="5" :version="version" :content="desc" @close="closeMask()" @eventClick="update()"></popup>
							</view>
						</view>
						
						<!-- <view class="handle">
							<button class="btn" type="default" @click="add()">增加数据</button>
							<button class="btn" type="default" @click="changeColumn(1)">+列数({{column}})</button>
							<button class="btn" type="default" @click="changeColumn(0)">-列数({{column}})</button>
							<button class="btn" type="default" @click="reset()">刷新数据</button>
						</view> -->
						<view class="flow-bg">
							<customWaterFallsFlow class="flow" ref="waterfallsFlowRef" :value="data.list" :column="column" :columnSpace="1.5" :seat="2" @wapperClick="wapperClick" @imageClick="imageClick" @loaded="loaded">
								<!-- #ifdef MP-WEIXIN -->
								<view  class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
									<view> </view>
									<view class="title">{{item.title}}</view>
									<view class="desc">{{item.desc}}</view>
								</view>
								<!-- #endif -->
								<!-- #ifndef MP-WEIXIN -->
								<!-- <template v-slot:default="item">
									<view class="item">
										<view class="title">{{item.title}}</view>
										<view class="desc">{{item.desc}}</view>
									</view>
								</template> -->
								<!-- #endif -->
							</customWaterFallsFlow>
							
						</view>
						<uni-popup ref="showimage" :mask-click="true" >
							<view style="position: relative;">
								<view>
									<text class="showtext" @click="copy()">{{showtxt}}</text>
									<image style="height: 600px;" :src=showimg mode="heightFix"/>
								</view>
								
								<view  style="text-align: center;">
									<uni-icons @click="cancelPopup()"  type="clear" color="#fff" size="50" />
								</view>
							</view>
						</uni-popup>
						
						<!-- <page-foot name="test1"></page-foot> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import customWaterFallsFlow from  '@/components/custom-waterfalls-flow/components/custom-waterfalls-flow/custom-waterfalls-flow.vue'
	import popup from "@/components/ge-popup/ge-popup.vue";
	import loginVue from '@/uni_modules/HJ2002-loginView/login/login.vue';
	import JSEncrypt from '@/node_modules/jsencrypt/bin/jsencrypt.js'
	import {siteUrl} from'@/common/version.js'
	
	export default {
		components:{
			customWaterFallsFlow,
			popup
		},
		data() {
			return {
				showimg: '',
				showtxt: '',
				load: 0,
				login_btn: true,
				data: {
					list: [
					]
				},
				column: 5,
				
				isMask:false,//是否显示弹窗
				index:1,//显示第几个弹窗
				money:99.99,//红包金额
				title:'公告',
				content:'公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容公告内容',
				version:'1.0',
				desc:'1.更新内容更新内容 <br/> 2.更新内容更新内容 <br/>2.更新内容更新内容',
				publicKey:"MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCFiGWsx3sYkw7hpLDVfwFUuQszgOTkD66n//0pcj4w9mrn2jH/A3KPNbfLs5i97fXyaCPjbKZ22sPRgO1nU14ESxCiAN5NiKvn1EHG2/U2ov4fFQZsNV0hAmYryFV1FLnYr4+ShMvWwXAOxiPHVN4hS34vkVtj9QftTcEtrM29DwIDAQAB",
				user_info :[],
				
				
				//展区token
				exhibition_token :'',
			}
		},
		onLoad(opt) {
			this.exhibition_token = opt.token
			
		},
		onShow(e) {
			// 先验证token有效直接用该用户、
			this.getexecpic1()
			this.user_info=["炫仔", 111]
			this.login_btn=false
		},
		methods: {
			//测试网络状态
			// togglePopup(index){
			// 	console.log(11111)
			// 	let list=this.data.list[index]
			// 	this.showimg = list.image;
			// 	this.$nextTick(() => {
			// 		this.$refs['showimage'].open()
			// 	})
			// },
			async getexecpic(token) {
				var [err, res] = await uni.request({
						url: siteUrl.BaseUrl + "get_exc_works",
						method: "POST",
						header:  {'content-type' : "application/json"},
						data:{"num_works": 30},
						timeout: 2000
					})
				
				if (res) {
					if(res.statusCode==200){
						var user = []
						var code = res.data.code;
						console.log(res)
						if(res.data.code ==200){
							console.log(res)
							var pics = []
							for(var i = 0; i < res.data.data.exc_works.length; i++){
								pics.push({ image: res.data.data.exc_works[i].url, title:res.data.data.exc_works[i].source_prompt.split('+++')[0], desc: '' },)
								}
							
							this.data.list  = pics
							console.log(this.data.list)
							
						}
						
					}
				} 
				
			},
			getexecpic1(){
				// this.sendRequest({
				// 				url : "get_exc_works",
				// 				method : "POST",
				// 				data:{"num_works": 30}
								
				// 			}).then(res =>{
				// 				var code = res.code;
				// 				// console.log(res)
				// 				if(res.code ==200){
				// 					console.log(res)
				// 					var pics = []
				// 					for(var i = 0; i < res.data.exc_works.length; i++){
				// 						pics.push({ image: res.data.exc_works[i].url, title:res.data.exc_works[i].source_prompt.split('+++')[0].split('@@@')[0].split('---')[0], desc: '' },)
				// 						}
									
				// 					this.data.list  = pics
				// 					// console.log(this.data.list)
									
				// 				}else{
				// 				}
				// 			})
			},
			copy() {
				var tag = document.createElement('input')
				tag.setAttribute('id', 'cp_input')
				tag.value = this.showtxt
				document.getElementsByTagName('body')[0].appendChild(tag)
				document.getElementById('cp_input').select()
				document.execCommand('copy')
				document.getElementById('cp_input').remove()
				uni.showToast({
					title: '复制成功',
					duration: 1000
				});
			},
			cancelPopup(){
				this.$refs['showimage'].close()
				
			},
			async get_user(token) {
				
				var [err, res] = await uni.request({
						url: siteUrl.BaseUrl + "get_user",
						method: "POST",
						header:  {'content-type' : "application/json"},
						data:{"token": token},
						timeout: 2000
					})
				
				if (res) {
					if(res.statusCode==200){
						var user = []
						if(res.data.code ==200){
							var user_id = res.data.data.user_id;
							var user_name = res.data.data.user_name;
							uni.setStorageSync('user',[user_name, user_id]);
							this.user_info = [user_name, user_id]
							this.login_btn=false
						}else{
							uni.setStorageSync('user',[]);
							this.user_info=[]
							this.login_btn=true
						}
						
						if(uni.getStorageSync('user')!=undefined){
							user = uni.getStorageSync('user');
						}
						
					}
				} else {
					uni.setStorageSync('user',[]);
				}
				
				
				return uni.getStorageSync('user')
			},

			//————————————————
			plogin(){
				this.isMask=true
			},
			closeMask(){
				this.isMask=false
			},
			login_mp(mp){
				var m = mp.m //账号
				var p = mp.p //密码
				this.yunlogin(m,p).then(res =>{
					console.log(res)
					var rspcode = res.rspcode
					if(rspcode==200){
						var access_token = res.data.access_token || ""
						console.log(access_token)
						//this.token_verify(access_token)
						this.get_user(access_token).then(res =>{
							var user_info = uni.getStorageSync('user')
							console.log(user_info)
							if(user_info.length >0){
								uni.setStorageSync('x-auth-token', access_token)
								this.isMask=false
								uni.navigateTo({
										url:"/pages/painting/painting"
									})
							}else{
								uni.showToast({
									    title: '该用户暂无权限',
									    icon: 'none',
									    duration: 2000
									})
							}
						})
						
						
					}else{
						uni.showToast({
							    title: res.rspdesc,
							    icon: 'none',
							    duration: 2000
							})
					}
				})
				
			},
			token_verify(token){
				var user = []
				this.sendRequest({
								url : "get_user",
								method : "POST",
								data:{"token": token}
								
							}).then(res =>{
								var user_id = res.user_id;
								console.log(res);
								
								if(user_id >0){
									var user_name = res.user_name;
									uni.setStorageSync('user',[user_name, user_id]);
									
								}else{
									uni.setStorageSync('user',[]);
								}
								console.log(uni.getStorageSync('user'));
								if(uni.getStorageSync('user')!=undefined){
									user = uni.getStorageSync('user');
								}
								
								return user
							})
				if(uni.getStorageSync('user')!=undefined){
					user = uni.getStorageSync('user');
				}
				
				return user
			},
			sleep(time){
				var timeStamp = new Date().getTime();
				var endTime = timeStamp + time;
				while(true){
					if (new Date().getTime() > endTime){
					return;
					} 
				}
			},
			get_token(){
				this.yunlogin('allen','Aa@123456').then(res =>{
					var access_token = res.data.access_token
					console.log(access_token)
				})
			},
			yunlogin(username,password){
				var encrypt = new JSEncrypt();
				encrypt.setPublicKey(this.publicKey); // 公钥 
				let enp = encrypt.encrypt(password);
				return new Promise((resolver,reject)=>{uni.request({
						url: siteUrl.yunLoginUrl,
						method: "POST",
						header:  {'content-type' : "application/json"},
						data:{
							"password": enp,
							"username":username,
							"grantType": "password",
							"remember":true,
								},
						success: res => {
							if (res.statusCode && res.statusCode != 200) {//api错误
								// uni.showModal({
								// 	content:"" + res.errMsg
								// });
								return;
							}
							resolver(res.data)
						},
						fail: (e) => {
							uni.showModal({
								content:"网络错误"
							});
							
						}
					})
				})
			},
			
			eventClick(){//关闭弹窗
				console.log(123123123)
				this.isMask=false;
			},
			update(){
				console.log('更新操作');
			},
			goto(){
				
				if(this.user_info.length>0){
					if(this.exhibition_token ==='exhibition-token-thecover2023-aigc'){
						uni.navigateTo({
								url:"/pages/painting/painting?token=exhibition-token-thecover2023-aigc"
							})
						return
					}
					uni.navigateTo({
							url:"/pages/painting/painting"
						})
				}else{
					this.isMask=true
				}
			},
			add() {
				const newArr = [{ image: 'https://via.placeholder.com/58x100.png/FF7F50', title: '我是标题8', desc: '描述描述描述描述描述描述描述描述8' }, 
				{ image: 'https://via.placeholder.com/59x100.png/C0C0C0', title: '我是标题9', desc: '描述描述描述描述描述描述描述描述9' }, 
				{ image: 'https://via.placeholder.com/60x100.png/FAEBD7', title: '我是标题10', desc: '描述描述描述描述描述描述描述描述10' }]
				this.data.list = this.data.list.concat(newArr);
			},
			changeColumn(h) {
				this.column = !h ? this.column - 1 : this.column + 1;
			},
			loaded() {
				console.log('加载完成')
			},
			wapperClick(item) {
				console.log('单项点击事件', item)
			},
			imageClick(image_item) {
				console.log('图片点击', image_item)
				this.showimg = image_item.image;
				this.showtxt = image_item.title;
				this.$nextTick(() => {
					this.$refs['showimage'].open()
				})
			},
			reset() {
				this.data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
				this.$refs.waterfallsFlowRef.refresh();
			}
		}
	}
	
</script>

<style>
	.head{
		background-image: none; 
		background-color: #706b6b;
	}
	.background{
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-items: stretch;
		min-width: 1440px;
		min-height: 100vh;
		
		overflow:hidde
	}
	.content {
		position: relative;
		background-repeat:no-repeat;
		background-position:center;
		/* opacity: 0.9; */
		width: 100%;
		height: 100vh;
		
		background: linear-gradient(to top right,#CC5FFF,#4474FF);
		background: -o-linear-gradient(to top right,#CC5FFF,#4474FF);
		background: -moz-linear-gradient(to top right,#CC5FFF,#4474FF);
	}
	.slogan-header{
		text-align: center;
	}
	.slogan{
		width: 320px;
		height: 155px;
		margin-top: 40px;
		margin-bottom: 30px;
		
	}
	.slogan-text{
		color: #FFF; 
		font-size: 2.1em; 
		font-weight: 600;
		/* margin-left: 37%; */
	}
	.slogan-bn{
		margin-top: 50px;
		color: white;
		background: linear-gradient(270deg, #FF8383 0%, #FF26DE 100%);
		/* max-width: 350px; */
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200px;
		min-height: 64px;
		/* padding: 10px 0 9px; */
		border-radius: 50px;
		font-size: 24px;
		
	}
	.flow-bg{
		margin-left: 5%;
		margin-right: 5%;
	}
	.flow{
		margin:auto; 
		margin-top: 50px;
		max-width: 1920px;
	}
	
	
	
	
	#waterfall {
	  column-count: 3;
	  width: 1500px;
	  margin: 0 auto;
	  column-gap: 15px;
	}
	#waterfall > span {
	  margin-bottom: 20px;
	  height: 500px;
	  display: block;
	  overflow: hidden;
	}
	#waterfall > span image {
	  display: block;
	  width: 100%;
	  
	  transform: rotate(4deg);
	  opacity: 0.9;
	  filter: saturate(150%);
	}
	#waterfall > span:hover image {
	  transform: rotate(0deg);
	  transform: scale(1.05);
	  transition: all 200ms linear;
	  opacity: 1;
	  filter: saturate(100%);
	}
	
	.handle {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
		padding: 10rpx;
	
		.btn {
			margin: 20rpx 10rpx;
			padding: 0 20rpx;
			background: #2878FF;
			font-size: 28rpx;
			color: #fff;
	
			&::after {
				border: 0;
			}
		}
	}
	
	.item {
		padding: 10rpx 10rpx 20rpx;
	
		.title {
			line-height: 48rpx;
			font-size: 28rpx;
			color: #666;
		}
	
		.desc {
			font-size: 24rpx;
			color: #666;
			font-weight: 800;
		}
	}

	.title {
		line-height: 48rpx;
		font-size: 28rpx;
		color: #666;
		font-weight: 600;
	}

	.desc {
		font-size: 24rpx;
		color: #666;
		font-weight: 800;
	}
	.zpz{
		width: 79px;
		height: 75px;
		margin-right: 15px;
		margin-bottom: -13px;
	}
	.showtext{
		color: aliceblue;
		font-size: 40rpx;
		font-weight: 500;
		position: absolute;
		left:-300px;
		width: 250px;
		
	}
</style>
